<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/layui.css">
		<script type="text/javascript" src="layui.js"></script>
	</head>
	<body>
		<div class="layui-card">
			<div class="layui-card-header layui-bg-black">西游记人物</div>
			    <div class="layui-card-body layui-bg-blue">
				   <ul>
					   <li>孙悟空</li>
					   <li>猪八戒</li>
					   <li>唐僧</li>
					   <li>沙僧</li>
				   </ul>  
			</div>
			<div class="layui-card-header layui-bg-black">水浒传人物</div>
			    <div class="layui-card-body layui-bg-blue">
				   <ul>
					   <li>108好汉</li>
				   </ul>  
			</div>
		</div> 
		<div class="layui-collapse"lay-accordion>
			<div class="layui-colla-item">
				<div class="layui-colla-title layui-bg-black">西游记人物</div>
					<div class="layui-colla-content layui-bg-blue layui-show">
					   <ul>
						   <li>孙悟空</li>
						   <li>猪八戒</li>
						   <li>唐僧</li>
						   <li>沙僧</li>
					   </ul>  
				</div>
			</div>
			<div class="layui-colla-item">
				<div class="layui-colla-title layui-bg-black">水浒传人物</div>
					<div class="layui-colla-content layui-bg-blue">
					   <ul>
						   <li>108好汉</li>
					   </ul>  
				</div>
			</div>
		</div> 
		<script>
			layui.use(['layer','element'],function(){
				var layer = layui.layer,
				element = layui.element;
			});
		</script>
	</body>
</html>
